<template>
	<view class="login waveWrapper waveAnimation">
		<view class="waveWrapperInner bgTop">
			<view class="wave waveTop" style="background-image: url('/static/image/wave-top.png')"></view>
		</view>
		<view class="waveWrapperInner bgMiddle">
			<view class="wave waveMiddle" style="background-image: url('/static/image/wave-mid.png')"></view>
		</view>
		<view class="waveWrapperInner bgBottom">
			<view class="wave waveBottom" style="background-image: url('/static/image/wave-bot.png')"></view>
		</view>
		<view v-if="false" class="avatarName">
			<image class="avatar" :src="avatarUrl" mode="widthFix"></image>
			<text v-if="!avatarUrl" class="getAvatar" @click="getAvatar">获取头像</text>
			<text class="nickname">{{nickName || '你好'}}</text>
		</view>
		<u-button style="width: 80%;" ripple type="primary" class="aKeyLogin" open-type="getPhoneNumber" @click="getAvatar" @getphonenumber="getPhoneNumber">手机号码一键登录</u-button>
		<u-button style="width: 80%;" ripple type="primary" @click="otherLogin">其他手机号码登录</u-button>
		<u-checkbox v-model="agree" size="26" shape="circle" class="u-checkbox u-checkbox-sm"><view class="u-checkBox-text">同意用户协议</view></u-checkbox>
		<view class="copyright">版权所有©青少年视力在线服务平台</view>
	</view>
</template>

<script>
	import { apiUrl } from '../../config'
	import { set } from '../../utils/storage'
	import { mapState, mapMutations } from 'vuex'
	
	export default {
		data() {
			return {
				agree: false
			};
		},
		onLoad() {
			// 获取登录凭证
			this.login()
		},
		computed: {
			...mapState(['code', 'avatarUrl', 'nickName'])
		},
		methods: {
			...mapMutations(['login', 'wxLogin', 'setAvatarUrl', 'setNickName']),
			getAvatar() {
				return new Promise((resolve, reject) => {
					wx.getUserProfile({
					  desc: '用于展示头像信息',
					  success: res => {
						this.setAvatarUrl(res.userInfo.avatarUrl)
						this.setNickName(res.userInfo.nickName)
						resolve(true)
					  },
					  fail(err) {
					  	resolve(false)
					  }
					})
				})
			},
			otherLogin() {
				if (!this.agree) {
					this.$u.toast('请先同意用户协议')
					return
				}
				uni.navigateTo({
				    url: '/pages/otherLogin/otherLogin'
				});
			},
			login() {
				const that = this
				uni.login({
				  provider: 'weixin',
				  success(res) {
					that.wxLogin(res.code)
				  },
				  fail(err) {
					this.$u.toast('登录失败')
				  }
				})
			},
			async getPhoneNumber(e) {
				const { encryptedData, iv } = e.detail
				
				if (!encryptedData) {
					this.$u.toast('授权手机号失败')
					return
				}
				
				if (!this.agree) {
					this.$u.toast('请先同意用户协议')
					return
				}

				// 后端登录
				const userInfo = await this.$http.post('/tecent/code', {
					code: this.code,
					encryptedData,
					iv,
					headimgurl: this.avatarUrl,
					name: this.nickName
				}).then(res => res.data).catch(_ => false)
				
				
				// 测试数据 ---------------------------
				// set('openId', '123456')
				// this.login({ phone: 15068166064 })
				
				// // 跳转首页
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// })
				// return
				// 测试数据 ---------------------------
				if (!userInfo) {
					return
				}
				// 保存登录信息
				set('openId', userInfo.openId)
				this.login(userInfo)
				
				// 跳转首页
				uni.showToast({
				    title: '登录成功',
				    position: 'bottom'
				})
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {
		background: url('/static/image/login.png') no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;

		.avatarUrl {
			border-radius: 50%;
			overflow: hidden;
			width: 200rpx;
			margin-bottom: 30rpx;
		}
		
		.aKeyLogin {
			margin: 30rpx 0;
		}
		.avatarName {
			display: flex;
			flex-direction: column;
			align-items: center;
			.avatar {
				background: #ddd;
				border-radius: 50%;
				width: 200rpx;
				height: 200rpx;
			}
			.getAvatar {
				height: 200rpx;
				line-height: 200rpx;
				margin-top: -200rpx;
			}
			.nickname {
				margin: 30rpx 0 100rpx;
			}
		}
		.u-checkbox {
			margin-top: 20rpx;
			width: 80%;
		}
		.u-checkBox-text {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
		}
		.copyright {
			position: absolute;
			bottom: 50rpx;
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
		}
	}
</style>
<style scoped>
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}
		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}
		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}
	.waveWrapper {
		position: relative;
	}
	.waveWrapperInner {
		display: none;
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 50%;
		bottom: -1px;
		background-image: linear-gradient(to top, #f2f1f6 20%, $uni-color-primary 80%);
	}
	.bgTop {
		opacity: 0.5;
	}
	.bgMiddle {
		opacity: 0.2;
	}
	.bgBottom {
		opacity: 0.5;
	}
	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 50%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}
	.waveTop {
		background-size: 50% 100px;
	}
	.waveAnimation .waveTop {
	  animation: move-wave 3s;
	   -webkit-animation: move-wave 3s;
	   -webkit-animation-delay: 1s;
	   animation-delay: 1s;
	}
	.waveMiddle {
		background-size: 50% 100px;
	}
	.waveAnimation .waveMiddle {
		animation: move_wave 10s linear infinite;
	}
	.waveBottom {
		background-size: 50% 100px;
	}
	.waveAnimation .waveBottom {
		animation: move_wave 15s linear infinite;
	}
</style>
